<template>
  <div>
    <header>
      <p @click="back">返回</p>
     <div class="search">
        <SearchInput />
     </div>
    </header>
    <main class="container main-container">
      <div class="view column-view">
        <div class="main-area article-area shadow">
          <div class="article">
            <div class="author-info-block">
              <img class="lazy avatar avatar" :src="avatar_large" alt="" />
              <div class="author-info-box">
                <div class="author-name">
                  <span class="name">{{ auther_name }}</span>
                </div>
                <div class="meta-box">
                <span class="time">{{ formatDate }}</span>
                <span class="views-count">阅读{{ view_count }}</span>
              </div>
              </div>
              
            </div>
            <img class="article-hero" :src="cover_image" alt="">
            <h1 class="article-title">{{ title }}</h1>
            <div class="article-content">
              <div class="markdown-body">
                <div class="post" v-html="content"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import "@/assets/less/markdown.css";
import moment from "moment";
import { defineComponent, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import getPostContent from "./getPostContent";
import MarkdownIt from "markdown-it";
import SearchInput from "@/components/search-input/index.vue";

export default defineComponent({
  components: {
    SearchInput,
  },

  setup() {
    const router = useRouter();
    const route = useRoute();
    const auther_name = ref("");
    const id: string = route.params.id;
    const content = ref("");
    const title = ref("");
    const view_count = ref("");
    const ctime = ref("");
    const formatDate = ref("");
    const avatar_large = ref("");
    const cover_image = ref("");
    

    getPostContent(id).then((res) => {
      // debugger
      console.log(res);
      title.value = res.title;
      const md = new MarkdownIt();
      const text = md.render(res.mark_content);
      content.value = text;
      auther_name.value = res.auther_name;
      ctime.value = res.ctime;
      avatar_large.value = res.avatar_large;
      cover_image.value = res.cover_image
      formatDate.value = moment(Number(res.ctime * 1000)).format("YYYY-MM-DD");
      view_count.value = res.view_count;
    });
    const back = () => {
      router.back();
    };
    return {
      route,
      content,
      title,
      auther_name,
      view_count,
      back,
      ctime,
      formatDate,
      avatar_large,
      cover_image
    };
  },
  //  computed: {
  //     formatDate:function(data) {
  //       return moment(data).format('YYYY-MM-DD')
  //     }
  //   },
});
</script>

<style lang="less">
.search {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2rem;
}
header {
  height: 50px;
  display: flex;
  background: @white;
  color: @primary-color;
  text-align: center;
  input {
    margin-top: 2px;
    height: 22px;
    margin: auto;
  }
  p {
    // margin-right: 30px;
    line-height: 20px;
    position: relative;
    top: 15px;
    left: 20px;
  }
}

.search-input {
  padding: 25 * @unit 30 * @unit;
  background-color: #efefef;
  height: 95 * @unit;
  display: flex;
  border-radius: 10 * @unit;
  &__icon {
    margin-right: 10 * @unit;
  }
  &__input {
    margin-right: 10 * @unit;
    font-size: 40 * @unit;
    flex: 1;
    caret-color: @primary-color;
    background-color: transparent;
    border: none;
    outline: none;
    &::-webkit-input-placeholder {
      color: #c8c8c8;
    }
  }
  &__del-btn {
    color: #b1afaf;
  }
}

.html {
  background-color: #f4f5f5;
}
.container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
  .column-view {
    padding: 0 0 8rem;
  }
  .view {
    margin-top: 1.767rem;
    .shadow {
      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    }
    .article-area {
      margin-bottom: 1.5rem;
      padding: 0 2rem;
    }

    .main-area {
      position: relative;
      width: 700px;
      max-width: 100%;
      background-color: #fff;
      border-radius: 2px;
      box-sizing: border-box;
    }
  }
}
.author-info-block {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
  .avatar {
    flex: 0 0 auto;
    margin-right: 1rem;
    width: 3.333rem;
    height: 3.333rem;
    border-radius: 50%;
  }
  .author-info-box {
    min-width: 0;
    flex-grow: 1;
    flex: 1;
    height: 43px;
    .author-name {
      height: 22px;
      .name {
        display: inline-block;
        vertical-align: top;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 1rem; 
        font-weight: 700;
        color: #333;
      }
     
    }
     .meta-box {
        font-size: .5rem;
        color: #909090;
        margin-top: 0.25rem;
        letter-spacing: 1px;
      }
  }
}
.article-hero{
    margin-bottom: 2rem;
    width: 100%;
}
.article-title {
  font-size: 2rem;
  margin: 0.67em 0;
  // font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.views-count {
  margin-left: 0.5em;
}
.article {
  margin-bottom: 3rem;
  padding: 2rem 0 0;
}
</style>